<template>
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" title="数据对比窗口" :minHeight="300" width="800px" @ok="handleSubmit">
      <a-spin :spinning="confirmLoading">
        <a-form @submit="handleSubmit" :form="form" class="form">
          <a-row class="form-row" :gutter="24">
            <a-col :md="12" :sm="8">
              <a-form-item label="数据库表名" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" name="dataTable">
                <a-input placeholder="请输入数据库表名" v-model:value="dataTable" disabled />
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="8">
              <a-form-item label="数据ID" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                <a-input placeholder="请输入数据ID" v-model:value="dataId" disabled />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="form-row" :gutter="24">
            <a-col :md="12" :sm="8">
              <a-form-item label="版本号1" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
                <a-select placeholder="请选择版本号" @change="handleChange1" v-model:value="dataVersion1">
                  <a-select-option v-for="(log, logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
                    {{ log.dataVersion }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="8">
              <a-form-item label="版本号2" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                <a-select placeholder="请选择版本号" @change="handleChange2" v-model:value="dataVersion2">
                  <a-select-option v-for="(log, logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
                    {{ log.dataVersion }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </BasicModal>
    <DataLogCompareModal @register="registerDataLogCompareModal"></DataLogCompareModal>
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal'
  import { queryDataVerList } from './datalog.api'
  import { reactive, ref, unref } from 'vue'
  import DataLogCompareModal from './DataLogCompareModal.vue'
  const dataId1 = ref('')
  const dataId2 = ref('')
  const dataId = ref('')
  const dataTable1 = ref('')
  const dataID3 = ref('')
  const dataTable = ref('')
  const confirmLoading = ref(false)
  const isUpdate = ref(true)
  const dataVersionList = ref([])
  let dataLog = reactive({})
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    isUpdate.value = !!data?.isUpdate
    if (unref(isUpdate)) {
      let checkedRows = data.selectedRows
      dataTable.value = checkedRows[0].dataTable
      dataId.value = checkedRows[0].dataId
      dataId1.value = checkedRows[0].id
      dataId2.value = checkedRows[1].id
      initDataVersionList()
    }
  })

  const [registerDataLogCompareModal, { openModal }] = useModal()

  function handleChange1(value) {
    dataId1.value = value
  }

  function handleChange2(value) {
    dataId2.value = value
  }

  function handleSubmit() {
    let result = { dataId1: dataId1.value, dataId2: dataId2.value }
    openModal(true, {
      result,
      isUpdate: true,
    })
    closeModal()
  }

  function initDataVersionList() {
    queryDataVerList({ dataTable: dataTable.value, dataId: dataId.value }).then((res) => {
      dataVersionList.value = res.map((value, key, arr) => {
        arr['label'] = value
        return arr
      })
      console.info(dataVersionList.value)
    })
  }
</script>

<style scoped lang="less">
  .detail-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 600px;
  }
</style>
